<template>
<div>
      <span style="position: relative;">
        <div :class="boxClass" @click="click">
          <div :class="itemClass"></div>
        </div>
      </span>
    </div>
</template>

<script>
export default {
  name: "Switch",
  data() {
    return {
      boxClass: {
        switch: true,
        'switch_active': false
      },
      itemClass: {
        item: true,
        'item_active': false
      },
      isCheck: false
    };
  },
  methods: {
    // 切换状态
    click() {
      this.isCheck = !this.isCheck;

      this.itemClass.item_active = this.isCheck;
      this.boxClass.switch_active = this.isCheck;
    }
  }
};

</script>

<style scoped>
.switch {
  position: relative;
  width: 80px;
  height: 40px;
  background-color: #ccc;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.5s;
}
.switch_active {
  background-color: #1890ff;
}
.item {
  width: 34px;
  height: 34px;
  border-radius: 17px;
  position: absolute;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: all 0.5s;
}
.item_active {
  left: 43px;
}
</style>